<template>
  <div class="navbar-container flex-x-between-center">
    <!--  html  -->
    <div class="title">{{ $route.meta.title }}</div>
    <el-tooltip class="login_switchBox" effect="dark" :content="loginInfo.sourceName" :disabled="loginInfo.sourceName ? false : true" placement="top">
      <div v-if="loginInfo.sourceName" class="login_switchBtn" @click="login_switchBtn">
        <img v-if="loginInfo.spInfo.roleAlias == 'boss' && loginInfo.sourceName == '付惠吧'" src="../../../../../public/static/img/login-img/fhb_logo.png">
        <img v-if="loginInfo.spInfo.roleAlias == 'boss' && loginInfo.sourceName == '享扫'" src="../../../../../public/static/img/login-img/xh_logo.png">
        <img v-if="loginInfo.spInfo.roleAlias == 'agent' && loginInfo.sourceName == '付惠吧'" src="../../../../../public/static/img/login-img/fhb_logo.png">
        <img v-if="loginInfo.spInfo.roleAlias == 'agent' && loginInfo.sourceName == '享扫'" src="../../../../../public/static/img/login-img/xh_logo.png">
      </div>
    </el-tooltip>
    <div class="flex-x-end-center">
      <el-avatar v-if="userInfo && userInfo.avatar" size="small" :src="userInfo.avatar" fit="fill" style="margin-right: 10px" />
      <div class="name">{{ spInfo && spInfo.name }} — {{ userInfo && userInfo.name }}</div>
      <svg-icon icon-class="s-logout" class="icon pointer app-color-danger" @click="handleLogout" />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { checkPageJumpTo, pay_platform_login } from '@/api/user/index.js'
export default {
  data() {
    return {
      // 配置
      // 状态
      // 数据
    }
  },
  computed: {
    ...mapGetters(['loginInfo', 'spInfo', 'userInfo'])
  },

  beforeCreate() {},
  created() {
    console.log('spInfo', this.spInfo)
    console.log('loginInfo', this.loginInfo)
    console.log('userInfo', this.userInfo)
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  update() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    /**
		 * 数据组
		 */
    /**
		 * 按钮组
		 */
    handleLogout() {
      this.$confirm('是否退出登录?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
        roundButton: true
      })
        .then(() => {
          this.$store.dispatch('user/FedLogOut').then(() => {
            location.reload() // 为了重新实例化vue-router对象 避免bug
          })
        })
        .catch(() => {})
    },
    /**
		 * 状态组
		 */
    /**
		 * 方法组
		 */

    // 切换系统
    login_switchBtn() {
      const isAdmin = this.loginInfo.userInfo.isAdmin ? 1 : 0
      const serial = this.loginInfo.spInfo.serial
      const params = {
        username: this.userInfo.username,
        scope: 1,
        isAdmin,
        userSuffix: serial
      }
      checkPageJumpTo({
        params
      }).then(res => {
        if (res.data == null) {
          this.$message({
            message: '您暂时还没开通享扫权限。',
            type: 'warning'
          })
        } else {
          if (res.data.domainUrls) {
            const jumpUrl = res.data.domainUrls[0] // 'http://192.168.111.137:8082/' // res.data.domainUrls[0];
            pay_platform_login().then(res => {
              const url = res.data
              this.$axios({
                url: url,
                method: 'post',
                data: {}
              }).then(res => {
                const {
                  access_token,
                  account,
                  avatar,
                  client_id,
                  dept_id,
                  expires_in,
                  jti,
                  license,
                  nick_name,
                  real_name,
                  refresh_token,
                  role_id,
                  role_name,
                  scope,
                  tenant_id,
                  token_type,
                  user_id,
                  user_name
                } = res.data
                const headerName = 'X-SERVICER-TOKEN'
                window.open(
                  encodeURI(
                    jumpUrl +
											'?' +
											'headerName=' +
											headerName +
											'&account=' +
											account +
											'&avatar=' +
											avatar +
											'&client_id=' +
											client_id +
											'&dept_id=' +
											dept_id +
											'&expires_in=' +
											expires_in +
											'&jti=' +
											jti +
											'&license=' +
											license +
											'&nick_name=' +
											nick_name +
											'&real_name=' +
											real_name +
											'&refresh_token=' +
											refresh_token +
											'&role_id=' +
											role_id +
											'&role_name=' +
											role_name +
											'&scope=' +
											scope +
											'&tenant_id=' +
											tenant_id +
											'&token_type=' +
											token_type +
											'&user_id=' +
											user_id +
											'&user_name=' +
											user_name +
											'&access_token=' +
											access_token
                  )
                )
              })
            })
          } else {
            this.$message({
              message: '您未配置跳转地址！',
              type: 'warning'
            })
          }
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.navbar-container {
	height: 60px;
	padding: 0 20px;

	.title {
		font-size: 18px;
		font-weight: bold;
		color: #303133;
	}

	.login_switchBox {
		margin-left: auto;
		cursor: pointer;
		margin-right: 20px;
	}

	.name {
		margin-right: 6px;
		font-size: 12px;
		font-weight: bold;
		color: #303133;
	}

	.icon {
		font-size: 22px;
	}
}
</style>
